import Link from "next/link";
import {SearchIcon} from "../constants/icons";
import {darkTheme, lightTheme} from "@/constants/modes";
import Image from "next/image";
import {deleteSessionCookie, getUserFromSession} from "@/lib/auth";
import {redirect} from "next/navigation";

export default function Navbar() {
    // 查看是否有登录
    const user = getUserFromSession()

    async function action() {
        'use server';
        await deleteSessionCookie()
        redirect('/')
    }

    return (
        //  container
        <div className={"sticky bg-white top-0 h-14" + darkTheme + lightTheme}>
            {/* wrapper */}
            <div className="flex items-center h-full py-0 px-5 justify-end relative">
                {/* search */}
                <div
                    className="absolute left-0 right-0 m-auto w-[40%] flex justify-between  items-center
                    p-[0.3rem] border-[1px] border-solid border-[#ccc] rounded-[0.2rem]"
                >
                    {/* input */}
                    <input
                        className="focus:outline-none w-full mr-1 border-none bg-transparent"
                        type="text"
                        placeholder="Search"
                    />
                    <SearchIcon fontSize={20}/>
                </div>
                {user ?
                    <div className={'flex flex-row gap-2'}>
                        <Link href={'/profile'}>
                            <Image width={'35'} height={'35'}
                                   className={'rounded-full'} src={'/files/avatar.jpg'} alt=''/>
                        </Link>
                        <form action={action}>
                            <button type='submit'
                                    className={'text-xs font-semibold bg-red-400 p-2 rounded-lg'}>SIGN
                                OUT
                            </button>
                        </form>
                    </div> :
                    <Link href="/signin">
                        <button
                            className="py-1 px-4 bg-transparent border-[1px] border-solid border-[#3ea6ff]
                    text-[#3ea6ff] rounded-md cursor-pointer flex items-center gap-1"
                        >
                            SIGN IN
                        </button>
                    </Link>}
            </div>
        </div>
    );
}